<template>
  <div class="myDatepicker">
    <el-date-picker
      :ref="datepickerRef"
      @change="datepickerChange(childModel)"
      :type="configDefault.type"
      :editable="configDefault.editable"
      :clearable="configDefault.clearable"
      :format="configDefault.format"
      :value-format="configDefault.valueFormat"
      :disabled="disabled"
      :picker-options="pickerOptions"
      :placeholder="
        disabled || configDefault.readonly ? '' : configDefault.placeholderLabel
      "
      :unlink-panels="configDefault.unlinkPanels"
      :default-time="configDefault.defaultTime"
      range-separator="-"
      :start-placeholder="configDefault.startPlaceholderLabel || '开始日期'"
      :end-placeholder="configDefault.endPlaceholderLabel || '结束日期'"
      v-model.lazy="childModel"
      class="el-form-item-all-input"
    ></el-date-picker>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "myDatepicker",
  props: {
    datepickerRef: {
      type: String,
      default() {
        return "vueDatepicker";
      },
    },

    model: {
      // 当前组件绑定值
      type: [String, Number, Boolean, Array],
      require: true,
    },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组日期框
      type: [String, Number],
      default() {
        return 1;
      },
    },
    disabled: {
      // 当前组件是否禁用
      type: Boolean,
      default() {
        return false;
      },
    },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      childModel: this.model ? this.model : "",
      configDefault: {
        valueFormat: "yyyy-MM-dd",
        type: "date", // 显示类型 year/month/date/dates/ week/datetime/datetimerange/daterange
        editable: false, // 文本框是否可输入
        // 显示在输入框中的格式 'yyyy 年 MM 月 dd 日 HH 小时 mm 分 ss 秒'
        format: "yyyy 年 MM 月 dd 日",
        clearable: true, // 是否显示清除按钮
        // disabledDate: 2,
        minTime: "",
        maxTime: "",
        defaultTime: "",
        unlinkPanels: true,
        startPlaceholderLabel: "",
        endPlaceholderLabel: "",
        placeholderLabel: "",
      },
      pickerMinDate: "",
    };
  },
  computed: {
    pickerOptions() {
      // 当前时间日期选择器特有的选项参考下表
      // if (
      //   this.configDefault &&
      //   (this.configDefault.type === "datetimerange" ||
      //     this.configDefault.type === "daterange")
      // ) {
      return {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime();
          if (maxDate) {
            this.pickerMinDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.configDefault.disabledDate) {
            if (this.pickerMinDate) {
              const timer = 1000 * 3600 * 24 * this.configDefault.disabledDate;
              const minTime = this.pickerMinDate - timer;
              const maxTime = this.pickerMinDate + timer;
              return time.getTime() < minTime || time.getTime() > maxTime;
            } else {
              return false;
            }
          } else {
            if (this.configDefault.minTime && this.configDefault.maxTime) {
              return (
                time.getTime() < this.configDefault.minTime ||
                time.getTime() > this.configDefault.maxTime
              );
            } else if (
              this.configDefault.minTime &&
              !this.configDefault.maxTime
            ) {
              return time.getTime() < this.configDefault.minTime;
            } else if (
              !this.configDefault.minTime &&
              this.configDefault.maxTime
            ) {
              return time.getTime() > this.configDefault.maxTime;
            } else {
              return false;
            }
          }
        },
        // shortcuts: [
        //   {
        //     text: "最近一周",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit("pick", [start, end]);
        //     }
        //   },
        //   {
        //     text: "最近一个月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        //       picker.$emit("pick", [start, end]);
        //     }
        //   },
        //   {
        //     text: "最近三个月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        //       picker.$emit("pick", [start, end]);
        //     }
        //   }
        // ],
      };
      // } else {
      //   return {};
      // }
    },
  },
  watch: {
    childModel(val, oldVal) {
      if (val !== oldVal) {
        this.$emit("update:model", val);
      }
    },
    model(val, oldVal) {
      if (val !== this.childModel) {
        this.childModel = val;
      }
    },
    formConfigData: {
      handler(newVal, objVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    loadDateType(dateType) {
      let valueFormat = "yyyy-MM-dd",
        format = "yyyy 年 MM 月 dd 日";
      if (dateType == "week") {
        format = "yyyy 年 MM 月 W 周";
      } else if (dateType == "month") {
        valueFormat = "yyyy-MM";
        format = "yyyy 年 MM 月";
      } else if (dateType == "year") {
        valueFormat = "yyyy";
        format = "yyyy 年";
      }
      this.configDefault.type = dateType;
      this.configDefault.valueFormat = valueFormat;
      this.configDefault.format = format;
    },
    datepickerChange: function (newVal) {
      this.$emit("changeCallback", this.modelKey + "_" + this.which, newVal);
    },
  },
};
</script>

<style lang="less">
.myDatepicker {
  .el-date-editor {
    width: 100%;
  }
}
</style>
